<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <title>OpenLayers v6.13.0 API - Index</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.bundle.min.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
    <link type="text/css" rel="stylesheet" href="styles/site.css">
  </head>
  <body>
    <div class="container-fluid">
      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
          <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
          </ul>
        </nav>
      </header>
      <div id="wrap" class="row">
        <div class="navigation col-md-4 col-lg-3">
          <div class="search-wrapper">
            <div class="search">
              <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
            </div>
          </div>
          <div class="navigation-list-wrapper">
            <ul class="navigation-list search-empty">
              <li class="loading">Loading …
            </ul>
          </div>
        </div>

        <div class="main col-md-8 col-lg-9">
            <h1 class="page-title" data-filename="index.html">Index</h1>
            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              This documentation is for OpenLayers v<span id="package-version">6.13.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
            </div>
            


    




    <section>
        <article class="readme"><div class="row mb-3">
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Map</h4>
        <p>A <a href="module-ol_Map-Map.html">map</a> is made of <a href="module-ol_layer_Base-BaseLayer.html">layers</a>, a <a href="module-ol_View-View.html">view</a> to visualize them, <a href="module-ol_interaction_Interaction-Interaction.html">interactions</a> to modify map content and <a href="module-ol_control_Control-Control.html">controls</a> with UI components.</p>
        <a href="module-ol_Map-Map.html">Overview</a><br>
        <a href="module-ol_Map-Map.html#Map">Creation</a><br>
        <a href="module-ol_MapBrowserEvent-MapBrowserEvent.html">Events</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">View</h4>
        <p>The view manages the visual parameters of the map view, like resolution or rotation.</p>
        <a href="module-ol_View-View.html">View</a> with center, projection, resolution and rotation
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Layers</h4>
        <p>Layers are lightweight containers that get their data from <a href="module-ol_source_Source-Source.html">sources</a>.</p>
        <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a><br>
        <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a><br>
        <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a><br>
        <a href="module-ol_layer_VectorImage-VectorImageLayer.html">ol/layer/VectorImage</a><br>
        <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a><br>
        <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Controls</h4>
        <a href="module-ol_control.html#.defaults">Map default controls</a><br>
        <a href="module-ol_control_Control-Control.html">All controls</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Interactions</h4>
        <a href="module-ol_interaction.html#~defaults">Map default interactions</a><br>
        Interactions for <a href="module-ol_Feature-Feature.html">vector features</a>
        <ul><li><a href="module-ol_interaction_Select-Select.html">ol/interaction/Select</a></li>
          <li><a href="module-ol_interaction_Draw-Draw.html">ol/interaction/Draw</a></li>
          <li><a href="module-ol_interaction_Modify-Modify.html">ol/interaction/Modify</a></li>
        </ul>
        <a href="module-ol_interaction_Interaction-Interaction.html">All interactions</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Sources and formats</h4>
        <a href="module-ol_source_Tile-TileSource.html">Tile sources</a> for <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a> or <a href="module-ol_layer_WebGLTile-WebGLTileLayer.html">ol/layer/WebGLTile</a>
        <br><a href="module-ol_source_Image-ImageSource.html">Image sources</a> for <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a>
        <br><a href="module-ol_source_Vector-VectorSource.html">Vector sources</a> for <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a>
        <br><a href="module-ol_source_VectorTile-VectorTile.html">Vector tile sources</a> for <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
        <br><a href="module-ol_format_Feature-FeatureFormat.html">Formats</a> for reading/writing vector data
        <br><a href="module-ol_format_WMSCapabilities-WMSCapabilities.html">ol/format/WMSCapabilities</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Projections</h4>
          <p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform coordinates from and to geographic, use <a href="module-ol_proj.html#.fromLonLat">ol/proj#fromLonLat()</a> and <a href="module-ol_proj.html#.toLonLat">ol/proj#toLonLat()</a>. For extents and other projections, use <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a> and <a href="module-ol_proj.html#.transform">ol/proj#transform()</a>.<p>
          <a href="module-ol_proj.html">ol/proj</a>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Observable objects</h4>
        <p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object.ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-lg-6 py-3">
    <div class="card h-100 bg-light">
      <div class="card-body">
        <h4 class="card-title">Other components</h4>
        <a href="module-ol_Geolocation.html">ol/Geolocation</a><br>
        <a href="module-ol_Overlay-Overlay.html">ol/Overlay</a><br>
      </div>
    </div>
  </div>
</div>
<h3 class="mb-3">API change policy</h3>
The OpenLayers API consists of
<ul>
  <li>names and signatures of constructors</li>
  <li>names and signatures of instance methods and properties</li>
  <li>names and signatures of functions</li>
  <li>names of constants</li>
</ul>
<p>Within a major release series, the API will not be changed.  Any changes to the API will be accompanied by a new major release.</p>
<p class="text-danger">Note: The API change policy does not cover CSS class names that are used to style the OpenLayers UI. It also does not cover any typedefs and enums.</p></article>
    </section>





        </div>
      </div>
      <script>prettyPrint();</script>
      <script src="scripts/linenumber.js"></script>
      <script src="scripts/main.js"></script>
    </div>
  </body>
</html>